<template>
  <div class="applymsg_page">
    <div class="register">
      <div class="register_body">
        <div class="register_header">
          <div class="register_logo">
            <router-link :to="{name: 'Home'}">
              <img :src="webInfo.logoImg" alt="" v-if="webInfo && webInfo.logoImg">
            </router-link>
          </div>
        </div>
        <div class="register_content">
          <div class="register_title">{{applyTitle}}</div>
          <div class="steps">
            <span class="step" :class="{step_ok: step1}">签订协议</span>
            <span class="step" :class="{step_ok: step2}">填写资料</span>
            <span class="step" :class="{step_ok: step3}">审核</span>
          </div>
          <div v-if="tab === 1">
            <div class="step_info">
              <div class="clearfix" v-html="webInfo.entryAgreement">这里是协议内容</div>
            </div>
            <footer class="info_footer">
              <input type="checkbox" id="isRead" v-model="isRead">
              <label for="isRead">
                我已阅读并同意此协议
              </label>
              <span class="c_red">（温馨提示：阅读整个协议，才能进行下一步。）</span>
            </footer>
            <div>
              <button @click="goNext()" class="next_btn">下一步</button>
            </div>
          </div>



          <div v-show="tab === 2">
            <div>
              <el-form :model="zcBusinessFrom" label-width="80px" :rules="rules" ref="ruleForm">
                <el-form-item label="营业执照" >
                  <el-upload
                          class="avatar-uploader"
                          action="http://192.168.1.42:82/system/tbBusiness/upload"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="zcBusinessFrom.license" :src="zcBusinessFrom.license" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="商家头像" >
                  <el-upload
                          class="avatar-uploader"
                          action="http://192.168.1.42:82/system/tbBusiness/upload"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess01"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="zcBusinessFrom.bicon" :src="zcBusinessFrom.bicon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证正面" >
                  <el-upload
                          class="avatar-uploader"
                          action="http://192.168.1.42:82/system/tbBusiness/upload"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess02"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="zcBusinessFrom.cardfront" :src="zcBusinessFrom.cardfront" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证反面" >
                  <el-upload
                          class="avatar-uploader"
                          action="http://192.168.1.42:82/system/tbBusiness/upload"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess03"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="zcBusinessFrom.cardreverse" :src="zcBusinessFrom.cardreverse" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="店铺标志" >
                  <el-upload
                          class="avatar-uploader"
                          action="http://192.168.1.42:82/system/tbBusiness/upload"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess04"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="zcBusinessFrom.shoploog" :src="zcBusinessFrom.shoploog" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="店铺名" prop="sname">
                  <el-input v-model="zcBusinessFrom.sname" placeholder="店铺名" style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idcard">
                  <el-input v-model="zcBusinessFrom.idcard" placeholder="身份证号" style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="支付宝号" prop="payaccount">
                  <el-input v-model="zcBusinessFrom.payaccount" placeholder="支付宝账号" style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="店铺地址" prop="address">
                  <el-input v-model="zcBusinessFrom.address" placeholder="店铺地址" style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" prop="cid">
                  <el-select v-model="zcBusinessFrom.cid" placeholder="商品类型">
                    <el-option v-for="Type in goodsType" :label="Type.typename" :value="Type.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="入职日期" prop="during">
                  <el-date-picker
                          v-model="zcBusinessFrom.during"
                          type="datetime"
                          placeholder="选择有效日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <button @click="submit()" class="next_btn">提交</button>
            </div>
          </div>


          <div v-if="tab === 3">
            <div class="success_msg">
              <i class="iconfont">&#xe69f;</i>
              <p class="success_one">资料提交成功！</p>
              <p class="success_two">审核结果将在2个工作日内完成，请留意。！</p>
            </div>
            <div>
              <a href="javascript:" class="next_btn" @click="goIndex">返回首页</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


import {uploadPic} from '/src/api/upload.js'

import CodeButton from "../../../../components/common/CodeButton";


export default {
  head () {
      return {
        title: this.applyTitle,
        meta: [
            {
                hid: 'keywords',
                name: 'keywords',
                content: ''
            },
            {
                hid: 'description',
                name: 'description',
                content: ''
            }
        ]
      }
  },
  data () {
    let email = (rule, value, callback) => {
      let regExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (regExp.test(value) === false) {
        callback(new Error('请输入正确的邮箱'));
      } else {
        callback();
      }
    };
    let mobile = (rule, value, callback) => {
      let regExp = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
      if (regExp.test(value) === false) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    return {
      goodsType:[],
      zcBusinessFrom:{},
      webInfo:
              {
                'copyright':'领课网络 版权所有 © 2015-2020',
                'icp':'粤ICP备16009964号-1',
                'prn':'粤公网安备 44010602005774号'
              }
      ,
      token:{
        "token":sessionStorage.getItem("token")
      },
      ruleForm: {
        avatar:'',
        name: '',
        email: '',
        intro: '',
        mobile: '',
        code: '',
        level:'',
      },
      rules: {
        sname: [
          { required: true, message: '请输入讲师名称', trigger: 'blur' },
          {min:2 , max:10 ,message: '请输入长度在3到10之间的名称',trigger: 'blur'}
        ],
        telephone: [
          {  required: true, message: '请输入手机号', trigger: 'blur' },
          { validator:mobile ,trigger: 'blur'}
        ],
        payaccount: [
          {  required: true, message: '请输入支付宝账号', trigger: 'blur' },
          { validator:mobile ,trigger: 'blur'}
        ],
        idcard:[
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的证件号',
            trigger: 'blur'
          },
        ],
        address: [
          { required: true, message: '请输入店铺地址', trigger: 'blur' },
          {min:2 , max:10 ,message: '请输入长度在3到10之间的地址',trigger: 'blur'}
        ],

        during:[
          {required: true, message: '请输入入职日期', trigger: 'blur'}
       ],
        cid:[
          {required: true, message: '请选择商品类型', trigger: 'blur'}
        ],
      },
      clientData: '',
      webInfo: {
        'logoImg':require('@/assets/logo.jpg'),
        'entryAgreement':'欢迎来到caicai商家入驻中心' +
                '入驻须知' +
                '  入驻店铺需要实名制认证' +
                ' 要根据公司的规章制度来经营自己的店铺' +
                '要遵纪守法' +
                ' 请仔细阅读后点击下方同意按钮才可以入驻成为商家' +
                '如果您同意，请点击下面的按钮以接受我们的服务'
      },
      yanzhengcode:'',
      userInfo: '',
      recruitType: 1,
      applyType: '',
      applyTitle: '',
      submitBtn: false,
      isReferralCode: false,
      sendCode: false,
      isRead: false,
      step1: true,
      step2: false,
      step3: false,
      tab: 1
    }
  },
  created() {
    this.SearchGoodsType();
  },
  methods: {
    SearchGoodsType(){
      this.$http.post("/goods/goodsType/select").then(result=>{
           this.goodsType = result.data.data;
           console.log(this.goodsType)
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.zcBusinessFrom.license = res.data
    },
    handleAvatarSuccess01(res,file){
      this.zcBusinessFrom.bicon = res.data
    },
    handleAvatarSuccess02(res,file){
      this.zcBusinessFrom.cardfront = res.data
    },
    handleAvatarSuccess03(res,file){
      this.zcBusinessFrom.cardreverse = res.data
    },
    handleAvatarSuccess04(res,file){
      this.zcBusinessFrom.shoploog = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    goNext () {
      if (!this.isRead) {
        this.$msgBox({
          content: '请先阅读协议',
          isShowCancelBtn: false
        })
        return
      }
      this.step2 = true
      this.tab = 2
    },

    submit(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$http.post("/system/tbBusiness/auditBusiness", this.zcBusinessFrom).then(result => {
            if (result.data.code == 2000) {
              this.step3 = true
              this.tab = 3
            } else {
              this.$message.error("申请注册失败")
            }
          })
        }
      })

    },

    change(shureCode){
      this.yanzhengcode=shureCode;
      console.log("验证码："+shureCode);
    },
    goIndex () {
      this.tab = 1
      this.step2 = false
      this.step3 = false
      this.$router.push({name:'QianHome'})
    },
    goLogin () {
      this.$router.push({path: '/login'});
    },
  },
  mounted () {
    let E = require('wangeditor')
    this.editor2 = new E('#lecturerInfo')
    this.editor2.customConfig.uploadImgMaxLength = 1
    this.editor2.customConfig.customUploadImg = this.editorUpload
    this.editor2.create();

    this.ruleForm.mobile=window.sessionStorage.getItem("mobile");
  },
  components: {
    CodeButton
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }


  hr {
    margin-bottom: 30px;
  }
  .applymsg_page {
    .register {
      background: rgb(247, 247, 247);
      padding-bottom: 30px;
      .register_body {
        width: 900px;
        margin: 0 auto 30px;
      }
      .foot_text, .text_p {
        text-align: center;
        font-size: 12px;
        color: #999;
        padding: 10px 0;
      }
    }
    .register_header {
      height: 112px;
      // padding-top: 30px;
      position: relative;
      .register_logo {
        position: absolute;
        top: 30px;
        img {
          width: 186px;
          height: 52px;
        }
      }
      .text_p {
        font-size: 14px;
        text-align: right;
        height: 18px;
        line-height: 18px;
        margin-top: 48px;
        a {
          color: #0099FF;
          &:hover {
            text-decoration: none;
          }
        }
        span {
          display: inline-block;
          width: 1px;
          height: 18px;
          background: #333;
          position: relative;
          top: 4px;
          margin: 0 10px;
        }
      }
    }
    .register_content {
      border-radius: 8px;
      background: #fff;
      padding-bottom: 30px;
      min-height: 600px;
      .register_title {
        border-radius: 8px 8px 0 0;
        height: 80px;
        line-height: 80px;
        background: rgb(228, 228, 228);
        font-size: 18px;
        text-align: center;
        color: #333;
      }
    }
    .steps {
      width: 840px;
      margin: 0 auto;
      .step {
        display: inline-block;
        line-height: 30px;
        color: #999;
        font-size: 13px;
        width: 270px;
        margin: 30px 1px;
        background: rgba(242, 242, 242, 1);
        text-align: center;
        &.step_ok {
          background: rgba(0, 153, 255, 1);
          color: #fff;
        }
      }
    }
    .step_info {
      width: 798px;
      padding: 20px;
      border: 1px solid rgb(228, 228, 228);
      margin: 0 auto;
      .info_title {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        text-align: center;
      }
      .text_p {
        font-size: 14px;
        text-align: left;
        color: #333;
      }
    }
    .info_footer {
      width: 798px;
      line-height: 30px;
      padding: 0 20px;
      margin: 0 auto;
      font-size: 14px;
      border: 1px solid rgb(228, 228, 228);
    }
    .next_btn {
      display: inline-block;
      width: 320px;
      line-height: 46px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      background: rgba(213, 20, 35, 1);
      border-radius: 6px;
      position: relative;
      left: 50%;
      margin-left: -160px;
      margin-top: 30px;
      border: none;
      &:hover {
        color: #fff;
        text-decoration: none;
      }
      &.b_dis {
        background: #ccc;
      }
    }
    .form_group{
      margin-bottom: 20px;
      font-size: 14px;
      .label{
        text-align: right;
        float: left;
        display: block;
        width: 110px;
        line-height: 36px;
        color: #333;
      }
      .form_ctl{
        margin-left: 12px;
        float: left;
        width: 700px;
        position: relative;
        .photo_text {
          width: 176px;
          position: absolute;
          top: 15px;
          left: 116px;
          font-size: 12px;
          color: #999;
        }
        input {
          width: 310px;
          height: 46px;
          padding-left: 10px;
          border-radius: 6px;
          font-size: 14px;
          margin-top: -5px;
          &.reset_yzm {
            width: 200px;
            padding-right: 110px;
          }
          &.check_item {
            width: 14px;
            height: 14px;
            position: relative;
            top: 3px;
          }
        }
        .yzm_btn {
          width: 100px;
          height: 46px;
          position: absolute;
          left: 210px;
          top: -5px;
          line-height: 48px;
          background: rgb(213, 20, 35);
          border-radius: 0 6px 6px 0;
          text-align: center;
          color: #fff;
          cursor: pointer;
          border: none;
          &:disabled {
            background: #999;
          }
        }
      }
      .text{
        color: #333;
        line-height: 36px;
      }
      &:after{
        content: '';
        display: block;
        clear: both;
      }
    }
    .no_phone {
      width: 96px;
      height: 96px;
      background: rgb(242, 242, 242);
      border-radius: 6px;
      position: relative;
      text-align: center;
      line-height: 80px;
      font-weight: 700;
      color: #999;
      font-size: 20px;
      span {
        font-size: 12px;
        position: absolute;
        text-align: center;
        width: 96px;
        top: 20px;
        left: 0;
        font-weight: 400;
      }
    }
    .success_msg {
      width: 380px;
      margin: 0 auto;
      position: relative;
      i {
        color: green;
        font-size: 70px;
      }
      p {
        position: absolute;
        left: 90px;
        &.success_one {
          font-size: 20px;
          color: #333;
          top: 0
        }
        &.success_two {
          color: #999;
          font-size: 14px;
          top: 44px;
          padding: 0;
          text-align: left;
        }
      }
    }
    .err{
      color: red;
      padding-top: 5px;
    }
    .user_photo {
      width: 96px;
      height: 96px;
    }
    .select_box {
      height: 80px;
      width: 146px;
      margin: -5px 3px 0 0;
    }
    .text_box {
      font-size: 14px;
      color: #000;
      padding: 10px;
      border-radius: 6px;
      resize: none;
    }
    .checks {
      display: inline-block;
      margin-left: 10px;
      &:first-child {
        margin-left: 0;
      }
    }
    .prn_icon {
      width: 16px;
      height: 16px;
      position: relative;
      top: 3px;
    }
  }
</style>
